HTML Tutorial

    HTML is an acronym for HyperText Markup Language, and it is the standard language for creating web-pages. Every web page you surf on your browser is built using HTML. The primary use of HTML to provide a proper structure to the web-page so all the content or data of the page could represent adequately.  A stand-alone HTML can create only static and skeleton looking black and white pages, but with the help of CSS and JavaScript , we can create a more interactive and intuitive web-page. When we try to visit a website or click on the link, we basically request the server to show us the page, then the server acts on our request and sends us an appropriate HTML document as a response. Then this HTML document parsed by browse, and we able to see the content.

    History of HTML

    Tim Berners-Lee created HTML in late 1991, but it officially released in 1995 as HTML 2. Right now, HTML is managed and developed by an organisation called W3C (World Wide Web Consortium). Since the release of HTML, its core developer is evolving it with time, so it became easier for other developers to work on HTML. There was a rapid version up-gradation between HTML 1 to HTML 4, but it took more than 15 years to W3C developers for the release of next HTML version. With each version of HTML W3C introduce us with some new elements and remove some old ones.

    HTML Versions

    Versions Release Date
    HTML 1 1993
    HTML 2 24 November 1995
    HTML 3 14 January 1997
    HTML 4 18 December 1997
    HTML 5(current) 28 October 2015

    Web Browsers

    A web-browser is an Application that can parse or execute the HTML document or file. Apart from HTML web-browser is also capable of executing other front-end technology such as CSS and JavaScript. It’s the primary job of every browser to run the HTML file and render the result to the user. The browser uses the HTML tags to evaluate how the content should be display on the browser screen.

    HTML document

    A HTML document is a file containing HTML Code. We can create it using any text or code editor and save the file with .html extension, and execute the file using any web-browser.

    Sample 

    <!DOCTYPE html>
<html>
<head>
    <title>HTML Tutorial</title>
</head>
<body>
    <h1>TechGeekBuzz HTML</h1>
    <p>Welcome to TechGeekBuzz!!</p>
</body>
</html>

    Code Explanation

    • The <!Doctype html> define the version of HTML, right now it is designed on HTML 5.
    • <html> it is the opening element for HTML page.
    • <head> element contains the metadata about the document.
    • <title> element describes the title of the document which display on the web browser tab.
    • <body> element contain the web-page data that user sees.
    • <h1> element can format the data look, h1 indicates Heading 1.
    • <p> it describes the paragraph.

    HTML Tags

    Tags are the important part of HTML, every element you see on a HTML page surrounded by angel bracket <>, is an HTML tag. Mostly all the HTML tags comes in pair like <p> and </p>, where <p> tag define the starting of the paragraph content and </p> represent the end of the paragraph. In pair tag, the first tag represents the start tag, whereas a tag with forward-slash represents the end tag. There are some tags which do not come in pair such as <img>,<br>, <hr> , etc.

    Tag Syntax 

    <tagname>tag content content...</tagname>

    The main job of tags to represent the content or data of the web page, for instance, the paragraph tag <p> serve the paragraph content, head tag < head > is used to describe the meta-information about the page. HTML is case insensitive, so it does not matter how you write a tag, <p> and <P> both are same.

    <!DOCTYPE html> Declaration

    <!DOCTYPE html> is used to represent the type of document we want the browser to execute, and it generally describes the version of HTML should be used to execute that particular HTML document. It must be written at the top of the HTML document. It is not an HTML tag; it just represents that the current HTML document contains HTML 5 elements and tags so it should be parsed accordingly. In HTML 4 we use this for Doctype declaration. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Basic HTML tags:

    Heading

    In HTML to represent a heading we use the heading tags, and there are 6 different set from <h1> to <h6>, where <h1> tag represent the largest heading and <h6> represent the smallest heading. 

    <h1>Largest Heading</h1>
<h2>Large Heading</h2>
<h3>Moderate heading size</h3>
<h4> Small Heading </h4>
<h5> Smaller heading</h5>
<h6>Smallest heading </h6>

    Like other HTML tag heading tags are also case insensitive <h1> and </H1> means same.

    Paragraph

    The content or paragraph of an HTML page should reside in <p> tags.

    Example 

    <p>First paragraph.</p
<p>Second Paragraph</p> 

    Links

    Links can be used to connect one page with another or one element with another from the same page. To create a link on the HTML page we use the anchor tag <a>. 

    <a href="https://www.techgeekbuzz.com">TechGeekBuzz</a>

    href is the attribute of <a> anchor tag, which specify the destination location of the link.

    Images

    To insert an image on the page we use the HTML <img> tag, and it is not a paired tag, which means it does not have an ending tag. 

    <img src="image.jpg" alt="techgeekbuzz" width="104" height="142">

    src specify the image location, from where the image should be loaded. alt specifies the alternative information about the image, and it can be seen if you hover the mouse over the image. width and height specify the rendering dimension of the image. These are some of the most common HTML tags, you will get to know more HTML tags in later tutorials. HTML is all about tags and their attributes because the tags form the layout of the HTML document that needs to be displayed on the user browser.

    Summary

    • Invented by Tim Berners-Lee in 1991.
    • Officially released in 1995.
    • HTML stands for HyperText Markup Language.
    • It is not a programming language so there will be no errors if the code syntax is wrong.
    • HTML is used to structure the web-page.
    • It’s the HTML tags which define the formatting.
    • The browser is used to execute the HTML code, file or document.
    • HTML tags specify how the content and data must be display on the screen.
    • The latest version of HTML is HTML 5.
    Next Tutorial